<template>
  <div class="block">
  <el-cascader
    :options="options" v-model="value" 
    placeholder='选择地址'
    :props="{children: 'areaList',expandTrigger:'hover',label:'name'}"
    @change="handleChange"
   >
    <template #default="{data}">
      <span>{{ data.name }}</span>
    </template>
  </el-cascader>
  </div>
</template>

<script >
import { reactive, toRefs } from 'vue'
import { ElCascader } from 'element-plus'
import axios from 'axios'
export default ({
  name: 'City',
  components: {
    ElCascader
  },
  setup() {
    // 获取地址选择器的全国地址信息
    const url = 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json'
    axios.get(url).then(res => {
      state.options = res.data
    })
    const state = reactive({
      value: '',
      options: null
    })
    const handleChange = (value) => {
      console.log(value)
    }
    return {
      ...toRefs(state),
      handleChange 
    }
  },
})
</script>
